<template>
  <view class="income-expense-details-page">
    <!-- 金额统计与提现区域 -->
    <view class="summary-section">
      <!-- 左侧区域 -->
      <view class="left-section">
        <view class="cash-balance">
          <text class="balance-value">1500</text>
          <text class="balance-label">当前现金余额（元）</text>
        </view>
        <button class="withdraw-btn" @click="handleWithdraw">提现</button>
      </view>
      <!-- 右侧区域，通过 border-left 实现竖线 -->
      <view class="right-section">
        <text class="stats-item">累计收入（元）：1700元</text>
        <text class="stats-item">累计提现（元）：200元</text>
      </view>
    </view>
	<view class="bottomcolor"></view>
    <!-- 收支明细列表 -->
    <view class="details-list">
      <view class="list-title">收支明细</view>
      <view 
        class="detail-item" 
        v-for="(item, index) in details" 
        :key="index"
      >
        <text class="item-desc">{{ item.desc }}</text>
        <text class="item-amount" :style="{ color: item.amountColor }">{{ item.amount }}</text>
        <text class="item-time">{{ item.time }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      details: [
        {
          desc: 'XX车辆清洗、抛光打蜡服务',
          amount: '+ 50.00',
          amountColor: '#f00',
          time: '核销时间:2022-10-12 11:09'
        },
        {
          desc: '提现',
          amount: '+ 200.00',
          amountColor: '#f00',
          time: '提现时间:2022-10-12 11:09'
        },
        {
          desc: 'XX车辆清洗、抛光打蜡服务',
          amount: '+ 50.00',
          amountColor: '#f00',
          time: '核销时间:2022-10-12 11:09'
        },
        {
          desc: 'XX车辆清洗、抛光打蜡服务',
          amount: '+ 50.00',
          amountColor: '#f00',
          time: '核销时间:2022-10-12 11:09'
        }
      ] // 模拟收支明细数据
    };
  },
  methods: {
    onBack() {
      // 返回上一页
      uni.navigateBack({
        delta: 1
      });
    },
    handleWithdraw() {
      // 可扩展提现逻辑，这里先简单提示
      uni.showToast({
        title: '提现功能暂未实现',
        icon: 'none',
        duration: 2000
      });
	  uni.navigateTo({
	  	url:"/pages/withdrawApplication/withdrawApplication"
	  })
    }
  }
};
</script>

<style scoped>
/* 页面整体样式 */
.income-expense-details-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  font-size: 14px;
  color: #333;
}
/* 金额统计与提现区域样式 */
.summary-section {
  background-color: #3399ff;
  color: #fff;
  display: flex;
  padding: 15px;
  align-items: center; /* 新增，让左右内容垂直居中对齐 */
}
/* 左侧区域样式 */
.left-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-right: 15px;
}
.cash-balance {
  margin-bottom: 10px;
  margin-left: 10px;
}
.balance-value {
  font-size: 30px;
  font-weight: bold;
  display: block;
  margin-left: 20px;
  margin-bottom: 5px;
}
.balance-label {
  font-size: 14px;
  color: #eee;
}
.withdraw-btn {
  width: 120px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  background-color: #ff6700;
  color: #fff;
  border-radius: 5px;
  font-size: 14px;
  margin-left: 10px;
}
/* 右侧区域样式，通过 border-left 实现竖线 */
.right-section {
  border-left: 1px solid #fff; /* 直接用 border-left 实现竖线，简化写法 */
  padding-left: 20px; /* 给文字留出距离 */
}
.stats-item {
  display: block;
  margin-bottom: 5px;
  color: #eee;
}
.bottomcolor{
	background-color: #3399ff;
	height: 60rpx;
}
/* 收支明细列表样式 */
.details-list {
  background-color: #fff;
  margin: -25px 0 0 3%;
  box-sizing: border-box;
  width: 94%;
  border-radius: 10px;
  padding: 10px;
}
.list-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  border-left: 3px solid #1296db;
  padding-left: 5px;
}
.detail-item {
  border-bottom: 1px solid #eee;
  padding: 10px 0;
}
.item-desc {
  font-size: 14px;
  margin-bottom: 5px;
  display: block;
}
.item-amount {
  font-size: 14px;
  margin-bottom: 5px;
  display: block;
  text-align: right;
}
.item-time {
  font-size: 12px;
  color: #999;
}
</style>